<template>
	<view class="container bg-w">
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="施工资料">
				<template slot='left'>
					<view class="flex width-100 ">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="construction-data margin-b-50 position-r-top">
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">测点名称</text>
				<text>{{ equipmentData.gaugingPoint }}</text>
			</view>
			<view v-show="showEquipment">
				<view v-show="equipmentData.equipmentId" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">设备id</text>
					<text>{{ equipmentData.equipmentId }}</text>
				</view>
				<view v-show="equipmentData.equipmentName" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">设备名称</text>
					<text>{{ equipmentData.equipmentName }}</text>
				</view>
				<view v-show="equipmentData.equipmentType" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">设备类型</text>
					<text>{{ equipmentData.equipmentType }}</text>
				</view>
			</view>
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">规范模板</text>
				<text>{{ equipmentData.name }}</text>
			</view>
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">施工负责人</text>
				<text>{{ equipmentData.chargeUserName }}</text>
			</view>
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">上报人员</text>
				<text>{{ equipmentData.reportName }}</text>
			</view>
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">上报位置</text>
				<text>{{ equipmentData.postAddr }}</text>
			</view>
			<view class="form-list flex flex-between height-40 border-bottom">
				<text class="color-6 ">上报时间</text>
				<text>{{ equipmentData.reportTime }}</text>
			</view>
			<view class="form-list">
				<view class="" v-for="(item,index) in attachementVos" :key='index'>
					<text class="dis-block margin-t-10">{{item.stepName}}</text>
					<text class="dis-block margin-t-10 margin-b-10 color-6">{{item.standard}}</text>
					<view class="fileAll">
						<image v-for="(ImgItem,ImgIndex) in item.imgList" :key='ImgIndex' :src="ImgItem" @click='showImg(ImgItem)' mode=""></image>
						<video v-for="(VideoItem,VideoIndex) in item.videoList" :key='VideoIndex' :src="VideoItem" :class="{'dis_none':hideVideo}"  controls></video>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="imgpopup" type="center">
			<view class="popup-view">
				<view class="popup-imgAll">
					<image :style="{'width': imgW,'height': imgH}" :src="imgUrl"  @click="closeImg"></image>
				</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import { equipmentDetail, getFileInfo} from '@/common/api/api.js'
	export default {
		data() {
			return {
				standardProId: '',
				standardId: '',
				auditReason: '',
				equipmentData: {},
				showEquipment: true,
				imgList:[],
				videoList:[],
				attachementVos:[],
				imgUrl:null,
				hideVideo:false,
				imgH:null,
				imgW:null,
				screenWidth:null,
				screenHeight:null,
			}
		},
		onLoad(params) {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.standardProId = params.standardProId;
			this.standardId = params.standardId;
			this.loadEquipmentData();
		},
		methods: {
			loadEquipmentData() {
				equipmentDetail({
					standardProId: this.standardProId,
					standardId: this.standardId
				}).then((res)=> {
					if (res.data){
							this.equipmentData = res.data;
							this.attachementVos = res.data.attachementVos
							this.attachementVos.forEach(obj => {
								this.$set(obj,'imgList',[])
								this.$set(obj,'videoList',[])
								obj.buildPostDetails.forEach(obj2 => {
										getFileInfo(obj2.attachment).then(res2 => {
											if(obj2.fileType == 0){
												let imgUrl2 = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res2)
												obj.imgList.push(imgUrl2)
											}else{
												let videoUrl = window.URL.createObjectURL(new Blob([res2]))//将数据流转blob预览
												obj.videoList.push(videoUrl)
											}
										})
								})
							})
							console.log(this.attachementVos)
					} 
				})
			},
			
				calculate(w, h, pw, ph) {	//canvas图片自适应居中
					let px = 0;
					let py = 0;
					if(pw < w && ph < h){
							px = 0.5 * w - 0.5 * pw;
							py = 0.5 * h - 0.5 * ph;
					}else if (ph / pw > h / w) {
							let uu = ph;
							ph = h
							pw = pw * h / uu
							px = 0.5 * w - 0.5 * pw;
					} else {
							let uu = pw;
							pw = w;
							ph = ph * pw / uu
							py = 0.5 * h - 0.5 * ph;
					}
					return {pw,ph}
				},
			//预览图片
			showImg(ImgItem){
				this.imgUrl = ImgItem
				this.hideVideo = true
				uni.getImageInfo({
						src: ImgItem,
						success: (e) => {
							this.imgH = this.calculate(this.screenWidth,this.screenHeight,e.width,e.height).ph +'px'
							this.imgW = this.calculate(this.screenWidth,this.screenHeight,e.width,e.height).pw +'px'
						}
				});
				this.$refs.imgpopup.open();
			},
			closeImg(){
				this.hideVideo = false
				this.$refs.imgpopup.close();
			},
		}
	}
</script>

<style lang="less" scoped>
	.form-list { padding: 0 3%; }

	.opinion-text {
		height: 100px;
		text-align: left;
	}
	
	.construction-footer {
		width: -webkit-fill-available;
		height: 100rpx;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		button {
			font-size: 28rpx;
			color: #fff;
			width: 50%;
			line-height: 100rpx;
			border-radius: 0;
		}
		button:first-child {
			background-color: #fa5959;
			border-right: 1px solid #fff;
		}
		button:last-child {
			background-color: #09AAE9;
		}
	}

	.mt--5 {
		margin-top: -10rpx;
	}
	.fileAll{
		overflow: hidden;
		uni-image,uni-video{width: 48%;margin-right: 2%;height: 300rpx;border: 1px solid #eee;box-sizing: border-box;float: left;margin-bottom: 20rpx;}
		uni-image:nth-child(2n){margin-right: 0;}
	}
	uni-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:block;box-sizing:border-box}
	uni-modal .uni-mask{position:fixed;z-index:999;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5)}
	uni-modal .uni-modal{position:fixed;z-index:999;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fff;text-align:center;border-radius:3px;overflow:hidden}
	uni-modal .uni-modal *{box-sizing:border-box}uni-modal .uni-modal__hd{padding:1em 1.6em .3em}
	uni-modal .uni-modal__title{font-weight:400;font-size:18px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
	uni-modal .uni-modal__bd,uni-modal .uni-modal__title{word-wrap:break-word;word-break:break-all;white-space:pre-wrap}
	uni-modal .uni-modal__bd{padding:1.3em 1.6em 1.3em;min-height:40px;font-size:15px;line-height:1.4;color:#999;max-height:400px;overflow-y:auto}
	uni-modal .uni-modal__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}
	uni-modal .uni-modal__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}
	uni-modal .uni-modal__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;cursor:pointer}
	uni-modal .uni-modal__btn:active{background-color:#eee}
	uni-modal .uni-modal__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}
	uni-modal .uni-modal__btn:first-child:after{display:none}uni-modal .uni-modal__btn_default{color:#353535}uni-modal .uni-modal__btn_primary{color:#007aff}
</style>
